<template>
	<div class="add-account-dialog-box">
		<div class="choose-list-top-btns-save" @click="onAddAccount">
			<span class="choose-list-top-btns-save-label">{{ $i18n('exchange.account.add')  }}</span>
		</div>
		<a-modal
			:title="$i18n('exchange.account.add')"
			:visible="visible"
			:confirm-loading="confirmLoading"
			:okText="$i18n('common.button.ok.label')"
			:cancelText="$i18n('common.button.cancel.label')"
			@ok="onSubmit"
			@cancel="onHandleCancel"
			:global="dialogWindow"
		>
			<a-form-model
				ref="ruleForm"
				class="line-box-footer"
				:model="form"
				:rules="rules"
				:label-col="{ span: 6 }"
				:wrapper-col="{ span: 14 }"
			>
				<a-form-model-item ref="name" :label="$i18n('exchange.account.externalAccount')" prop="name">
					<a-input
						v-model.trim="form.name"
						@blur="() => { $refs.name.onFieldBlur(); }"
					/>
					<a-button type="primary" @click="onAdd" class="line-btn"
					>{{ $i18n('import.report.add') }}
					</a-button
					>
				</a-form-model-item>
				<a-form-model-item
					prop="accountList"
					ref="accountList"
					class="grop-box-model"
				>
					<div class="group-box">
						<span class="grouo-label">{{ $i18n('exchange.account.added') }}：</span>
						<div class="content-item">
							<span
								class="item-box"
								:class="{ 'active-item': activeIndex === index }"
								v-for="(item, index) in form.accountList"
								:key="index"
								@click.stop="onActiveItem(index)"
								@change="() => { $refs.accountList.onFieldChange(); }"
							>
								{{ item }}</span
							>
						</div>
						<a-button
							type="danger"
							@click.stop="onDelete"
							class="line-btn"
							:disabled="form.accountList.length<=0"
						>{{ $i18n('secret.secretLevel.delete_setting') }}
						</a-button>
					</div>
				</a-form-model-item>
			</a-form-model>
		</a-modal>
	</div>
</template>

<script>
import { getPanelData } from '@/api/modules/SelectOrgApi';

export default {
	name: 'addAccountDialog',
	data() {
		return {
			visible: false,
			confirmLoading: false,
			form: {
				name: '',
				accountList: []
			},
			activeIndex: '',
			rules: {
				name: [
					{ required: true, message: $i18n('selectPeople.externalAccount.name.null'), trigger: 'blur' },
					{
						max: 50,
						message: $i18n('selectPeople.externalAccount.name.error'),
						trigger: 'blur'
					}
				],
				accountList: [
					{
						type: 'array',
						required: true,
						message: $i18n('selectPeople.externalAccount.null'),
						trigger: 'change'
					}
				]
			}
		};
	},
	watch: {
		visible(val) {
			if (val) {
				window.showbarMask();
			} else {
				window.hidebarMask();
			}
		}
	},
	methods: {
		onAddAccount() {
			this.visible = true;
		},
		onSubmit() {
			this.$refs.ruleForm.validateField('accountList', (valiList) => {
				if (!valiList) {
					this.onHandleOk();
				}
			});
		},
		async onHandleOk() {
			this.confirmLoading = true;
			let params = {
				panel: 'ExchangeAccount',
				command: 'batchSave',
				arguments: { accountList: this.form.accountList }
			};
			let res = await getPanelData(params);
			if (res.code === 0) {
				this.visible = false;
				this.confirmLoading = false;
				this.form.accountList = [];
				this.$emit('toUpdateAccountList');
			}
		},
		onHandleCancel() {
			this.visible = false;
			this.$refs.ruleForm.resetFields();
		},
		onAdd() {
			this.$refs.ruleForm.validateField('name', (validName) => {
				if (!validName) {
					let name = this.form.name;
					let localValidateName = this.onValidateLocalName(name);
					if (localValidateName) {
						this.onValidateOutAccuonName(name);
						this.form.name = '';
					} else {
						this.$message.warning(`${name}外部单位已存在`);
					}
				}
			});
		},
		/**
		 * 检查添加的外部单位和本地已添加的外部单位是否有重复
		 * 返回值 true 时校验通过
		 *        false 时校验不通过
		 */
		onValidateLocalName(name) {
			let findRes = this.form.accountList.find((item) => item === name);
			return !findRes;
		},
		/**
		 * 校验外部单位名称是否重复
		 */
		async onValidateOutAccuonName(name) {
			let params = {
				panel: 'ExchangeAccount',
				command: 'validateName',
				arguments: {
					accountName: name
				}
			};
			let res = await getPanelData(params);
			if (res.code === 0) {
				this.form.accountList.push(name);
				this.form.name = '';
				this.$refs.ruleForm.clearValidate('accountList');
			} else {
				this.$message.warning(res.message);
			}
		},
		onActiveItem(index) {
			this.activeIndex = index;
		},
		onDelete() {
			this.form.accountList.splice(this.activeIndex, 1);
		}
	}
};
</script>

<style lang="scss">
.line-box-footer {
	.grop-box-model {
		.ant-col {
			width: 100%;

			.ant-form-explain {
				text-align: left;
				padding-left: 115px;
			}
		}
	}

	.group-box {
		width: 100%;
		overflow: auto;
		display: flex;

		.grouo-label {
			display: inline-block;
			width: 118px;
			height: 32px;
			text-align: right;
			color: rgba(0, 0, 0, 0.85);

			&::before {
				content: "*";
				color: #f5222d;
				margin-right: 4px;
				display: inline-block;
			}
		}

		.content-item {
			width: 275px;
			height: 120px;
			overflow: auto;
			border: 1px rgb(212, 212, 212) solid;

			.item-box {
				display: block;
				width: 100%;
				height: 22px;
				line-height: 22px;
				cursor: pointer;
				padding-left: 10px;
				box-sizing: border-box;

				&.active-item {
					background: $checkedColor;
					color: $defaultFontColor;
				}
			}
		}
	}

	.ant-form-item {
		display: flex;
		white-space: nowrap;
	}

	.line-btn {
		margin-left: 10px;
	}
}
</style>
